<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html lang="zh-cn">
  <head>
  	<base href="<%=basePath %>" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="hmyuanblog 基于Material Design Lite样式设计">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>HMYUANBLOG</title>

    <link rel="shortcut icon" href="static/favicon.ico"><!-- 浏览器图标 -->

	<link href="http://cdn.bootcss.com/material-design-lite/1.3.0/material.blue-pink.min.css" rel="stylesheet"><!-- 主题颜色 -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css"><!-- 字体 -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><!-- 图标 -->
    <script src="http://cdn.bootcss.com/material-design-lite/1.3.0/material.min.js"></script>
    <script src="http://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script><!-- 页面同步加载进度条 -->
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    
    <style>
/*滚动条样式*/
::-webkit-scrollbar:horizontal{ height: 4px;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background-color:#00aff0;}
::-webkit-scrollbar-thumb{background-color:rgb(255,64,129)}
::-webkit-scrollbar-thumb:hover {background-color:rgb(255,64,129)}
::-webkit-scrollbar-thumb:active {background-color:rgb(255,64,129)}
/* 设置布局变化的动画效果 */
.layoutmain,.layoutmain *{
    transition:all 0.3s ease;
    -moz-transition:all 0.3s ease; /* Firefox 4 */
    -webkit-transition:all 0.3s ease; /* Safari and Chrome */
    -o-transition:all 0.3s ease; /* Opera */
}
/* 菜单和内容的基本布局 */
.layoutcontent{
    overflow:auto;
    position:absolute;
    left:240px;
    top:64px;
    bottom:0px;
    _height:100%;
    width: calc(100% - 240px);
}
.layoutmenu{
    width:240px;
    overflow:auto;
    position:absolute;
    left:0;
    top:64px;
    bottom:0px;
    _height:100%;
    overflow:auto;
    background: #fff;
}
/* 菜单滚动条不显示 */
.layoutmenu::-webkit-scrollbar{width:0px;}
.layoutmenu::-webkit-scrollbar:horizontal{ height: 0px;}
/* 隐藏菜单 */
.menuhide .layoutmenu{
    left:-240px;
}
.menuhide .layoutcontent{
    width: 100%;
    left:0px;
}
/* 头部吸附按钮的位置 */
.topbutton{
    bottom: -27px;
    margin-bottom: 0px;
}
/* 头部logo显示 */
.mdl-layout__header-row .mdl-layout-title{
    height: 64px;
    background: url(static/img/framaterial_logo8.png) center center/75% no-repeat #f7f7f7;
    text-indent: -9999px!important;
    width: 160px;
    position: absolute;
    top:0px;
}
/*布局适应小屏*/
@media all and (max-width: 768px) {
    .layoutmenu {
        width:90%;
        left:-90%;
    }
    .layoutcontent{
        width: 100%;
        left:0px;
    }
    .menuhide .layoutmenu{
        left:0px;
    }
}
/* 适应导航条变化 */
@media screen and (max-width: 1024px) {
    .layoutmenu {
        top:56px;
    }
    .layoutcontent{
        top:56px;
    }
    .mdl-layout__header-row .mdl-layout-title{
        width: 168px;
        height: 56px;
    }
}
/* 菜单样式 */
.layoutmenu .mdl-navigation {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.layoutmenu .mdl-navigation .mdl-navigation__link {
    display: block;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 16px 20px;
    margin: 0;
    color: #757575
}
.layoutmenu .mdl-navigation .mdl-navigation__link .material-icons{
    padding-right: 22px;
}
.layoutmenu .mdl-navigation .mdl-navigation__link:hover {
    background-color: #e0e0e0
}
.layoutmenu .mdl-navigation .mdl-navigation__link--current {
    background-color: #e0e0e0;
    color: #ff4081
}
/* 页面加载进度条的样式 */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #ff4081;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}
/* 向下隐藏布局 */
.layouthide .top100{
	top:100%;
	opacity:0.1;
}
/* 向左隐藏布局 */
.layouthide .left100{
	left:-100%;
	opacity:0.1;
}
/* 电脑和平板分界线修改为1024 */
@media (min-width: 480px) and (max-width:1023px) {
	.mdl-cell--4-col, .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
	    width: calc(50% - 16px);
	}
	.mdl-cell {
	    margin: 8px;
	    width: calc(50% - 16px);
	}
}
.layoutcontent .mdl-cell{
	background: #fff;
}

/* ---列表样式--------------------------------------- */
.showcontentlistcol{
	
	position: relative;
	float: left;
	margin: 0 10px;
	padding-bottom: 20px;
}
.showcontentlistcolelem{
	background: #fff;
	margin-top: 20px;
}
.showcontentlist{
	padding: 0 10px;
}
  </style>

  </head>
  <body class="layouthide" style="background: rgb(238, 238, 238);">
		<script>
			/* 控制菜单显示 */
            function menutogater(){
                if($(".layoutmain").hasClass("menuhide")){
                    $(".layoutmain").removeClass("menuhide");
                }else{
                    $(".layoutmain").addClass("menuhide");
                }
            }
			/* 内容延时显示 */
            $(function(){
            	setTimeout(function () { 
            		layouttarget();
                }, 120);
            });
            /* 隐藏和现实页面布局 */
            function layouttarget(){
            	if($("body").hasClass("layouthide")){
            		$("body").removeClass("layouthide");
                }else{
                    $("body").addClass("layouthide");
                }
            }
            $(function(){
            	/* a标签延时跳转 */
            	 $(".layouthideJump").mousedown(function(e){
            		 var $me = $(this);
            		 if(e.which==1){// 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
            			 layouttarget();
                     	 setTimeout(function () { 
                     		window.location.href=$me.attr('href');
                         }, 300);
	            	     return false;//阻止链接跳转
            		 }
            	 });
            });
        </script>
        <div class="layoutmain mdl-layout--fixed-header">
            <div class="layoutcontent top100" align="center">
                <div class="showcontentlist" style="max-width: 1676px;" align="left">
                	<script type="text/javascript">
                	var arr = [,,,,,,,,,,,,,,];
                	/* 根据参数渲染列表 */
                	function showcontentlist(arrs,colnum,colwidth){
                		var showcontentlistcolhtml = "";
                		for (var j = 0; j < colnum; j++) {
                			showcontentlistcolhtml += "<div class='showcontentlistcol' style='width:calc("+colwidth+"% - 20px);'></div>";
						}
                		var showcontentlistscroll =  $(".layoutcontent").scrollTop();
                		$(".showcontentlist").html(showcontentlistcolhtml);
                		showcontentlistadd(arrs);
                		$(".layoutcontent").scrollTop(showcontentlistscroll);
                	}
                	function showcontentlistadd(arrs){
                		for (var i = 0; i < arrs.length; i++) {
							var ar = arrs[i];
	                		var lower = getloweroflist($(".showcontentlistcol"));
	                		var div = $("<div class='mdl-shadow--2dp showcontentlistcolelem' style='height:"+(i%2+1)+"00px;'>新元素</div>");
                			div.click(function(){
                				layouttarget();
	                           	setTimeout(function () { 
	                           		window.location.href="content.jsp";
	                            }, 300);
                			});
	                		$(lower).append(div);
						}
                	}
                	/* 获取高度最低的一列 */
                	function getloweroflist(elems){
                		var lower = elems[0];
                		for (var i = 1; i < elems.length; i++) {
							var elem = elems[i];
							if($(elem).height()<$(lower).height()){
								lower = elem;
							}
						}
                		return lower;
                	}
                	/* 根据窗口大小显示对应的列数 */
                	var windowwidth = null;
                	function showcontentlistrun(){
                		if((windowwidth==null||windowwidth<1024)&&$(window).width()>=1024){
            				showcontentlist(arr,3,33.333);
            				windowwidth = $(window).width();
            			}else if((windowwidth==null||windowwidth>=1024||windowwidth<480)&&($(window).width()>=480&&$(window).width()<1024)){
            				showcontentlist(arr,2,50);
            				windowwidth = $(window).width();
            			}else if((windowwidth==null||windowwidth>=480)&&$(window).width()<480){
            				showcontentlist(arr,1,100);
            				windowwidth = $(window).width();
            			}
                	}
                	$(function(){
                		//窗口大小变更事件
               			showcontentlistrun();
                		$(window).resize(function() {
                			showcontentlistrun();
                		});
                	});
				     $(".layoutcontent").scroll(function(){  
				         var $this =$(this),  
				         viewH =$(this).height(),//可见高度  
				         contentH =$(this).get(0).scrollHeight,//内容高度  
				         scrollTop =$(this).scrollTop();//滚动高度  
				        //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容  
				        if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容  
				        	console.log(1);
				        	var arr3 = [,,,,,,,,];
				        	Array.prototype.push.apply(arr, arr3);
				        	showcontentlistadd(arr3);
				        	// 这里加载数据..  
				        }  
				     }); 
                	</script>
				</div>
            </div>
            <div class="layoutmenu mdl-shadow--4dp left100">
                <div style='height:160px;background: url("static/img/20170406149148123458e6329285f7b.png") 0% 0% / cover;'>
                </div>
                <nav class="mdl-navigation">
			      <a class="layouthideJump mdl-navigation__link mdl-navigation__link--current" href="index.jsp" ><i class="material-icons">&#xE88A;</i>首页</a>
			      <a class="layouthideJump mdl-navigation__link" href="index.jsp" ><i class="material-icons">&#xE89F;</i>收藏集</a>
			      <a class="layouthideJump mdl-navigation__link" href="index.jsp" ><i class="material-icons">&#xE886;</i>社群</a>
			      <a class="layouthideJump mdl-navigation__link" href="index.jsp" ><i class="material-icons">&#xE7FD;</i>个人资料</a>
			    </nav>
            </div>
        	<header class="mdl-layout__header" style="position: absolute;">
        	    <div onclick="menutogater();" class="mdl-layout__drawer-button  mdl-js-button mdl-js-ripple-effect"><i class="material-icons"></i></div>
                <!-- Top row, always visible -->
                <div class="mdl-layout__header-row">
                  <!-- Title -->
                  <a   href="index.jsp" class="layouthideJump mdl-layout-title ">HMYUAN</a>
                  <div class="mdl-layout-spacer"></div>
                  <!-- Colored FAB button with ripple -->
                  <button onclick="console.log($('.layoutmenu').text().replace(/\s/g,''));" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp topbutton">
                      <i class="material-icons">add</i>
                  </button>
                  <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
                              mdl-textfield--floating-label mdl-textfield--align-right">
                    
                    <label class="mdl-button mdl-js-button mdl-button--icon"
                           for="waterfall-exp">
                      <i class="material-icons">search</i>
                    </label>
                    <div class="mdl-textfield__expandable-holder">
                      <input class="mdl-textfield__input" type="text" name="sample"
                             id="waterfall-exp" />
                    </div>
                  </div>
                </div>
          </header>
        </div>
  </body>
</html>
